<template>
  <div>
    <div id="guage"
         ref="guage" />
  </div>
</template>

<script>
import Echarts from 'echarts'

// echarts字体大小适配
const font = document.documentElement.clientWidth
window.echartsFont = font / 1920

import Vue from 'vue'
// 方便全局引用echarts
Vue.prototype.$echarts = Echarts

export default {
  components: {},
  props: {},
  data () {
    return {
      option: {
        title: {
          text: '合计按时完成数',
          subtext: '',
          x: 'center'
        },
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {}
          }
        },
        backgroundColor: '#1c2e40',
        series: [
          {
            type: 'gauge',
            min: 0,
            max: 3,
            center: ['50%', '82%'],
            radius: '132%',
            startAngle: 185,
            endAngle: -5,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[0.1, '#ff8628'], [0.2, '#ff9a1c'], [0.3, '#ffd000'], [0.5, 'e8ee10'], [0.6, '#93d366'], [0.7, '#33a3bf'], [0.8, '#039ec8'], [0.9, '#15b9a9'], [1, '#1dbb97']],
                width: 0 * window.echartsFont
              }
            },
            axisLabel: {
              distance: 8,
              formatter: function (value) {
                return value.toFixed(0)
              },
              textStyle: {
                fontWeight: 'bolder',
                color: '#a5aab6',
                fontSize: 26 * window.echartsFont,
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 30 * window.echartsFont,
              splitNumber: 10,
              lineStyle: {
                color: 'auto'
              }
            },
            splitLine: {
              length: 45 * window.echartsFont,
              lineStyle: {
                width: 12 * window.echartsFont,
                color: [[0.1, '#ff8628'], [0.2, '#ff9a1c'], [0.3, '#ffd000'], [0.5, 'e8ee10'], [0.6, '#93d366'], [0.7, '#33a3bf'], [0.8, '#039ec8'], [0.9, '#15b9a9'], [1, '#1dbb97']]
              }
            },
            pointer: {
              shadowColor: '#fff',
              width: 13 * window.echartsFont,
              shadowBlur: 5
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: '#cf5d00' // 0% 处的颜色
                }, {
                  offset: 1, color: '#fa8c00' // 100% 处的颜色
                }], false)
              }
            },
            title: {
              show: true,
              textStyle: {
                color: '#7ea4ff',
                fontSize: 26 * window.echartsFont
              },
              offsetCenter: ['78%', '17%']
            },
            detail: {
              show: false
            },
            data: [{ value: 40, name: '合计单数' }]
          },
          {
            type: 'pie',
            hoverAnimation: false,
            radius: ['136%', '138.5%'],
            center: ['50%', '82%'],
            startAngle: 185,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 190,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: '#00a1fa'
                      }, {
                        offset: 1, color: 'rgba(2,109,194,0)'
                      }],
                      globalCoord: false
                    }
                  }
                }
              }, {
                value: 170,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          },
          {
            type: 'gauge',
            min: 0,
            max: 3,
            center: ['86%', '88%'],
            radius: '30%',
            startAngle: 100,
            endAngle: -5,
            splitNumber: 4,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[0.1, '#ff8628'], [0.2, '#ff9a1c'], [0.3, '#ffd000'], [0.5, 'e8ee10'], [0.6, '#93d366'], [0.7, '#33a3bf'], [0.8, '#039ec8'], [0.9, '#15b9a9'], [1, '#1dbb97']],
                width: 0 * window.echartsFont
              }
            },
            axisLabel: {
              distance: 8,
              show: false,
              formatter: function (value) {
                return value.toFixed(0)
              },
              textStyle: {
                fontWeight: 'bolder',
                color: '#a5aab6',
                fontSize: 19 * window.echartsFont,
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 10 * window.echartsFont,
              splitNumber: 10,
              lineStyle: {
                color: 'auto',
                opacity: 0.25
              }
            },
            splitLine: {
              length: 25 * window.echartsFont,
              lineStyle: {
                width: 4 * window.echartsFont,
                color: [[0.1, '#ff8628'], [0.2, '#ff9a1c'], [0.3, '#ffd000'], [0.5, 'e8ee10'], [0.6, '#93d366'], [0.7, '#33a3bf'], [0.8, '#039ec8'], [0.9, '#15b9a9'], [1, '#1dbb97']],
                opacity: 0.25
              }
            },
            pointer: {
              shadowColor: '#fff',
              width: 5 * window.echartsFont,
              shadowBlur: 5
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: '#cf5d00' // 0% 处的颜色
                }, {
                  offset: 1, color: '#fa8c00' // 100% 处的颜色
                }], false),
                opacity: 0.25
              }
            },
            title: {
              show: false
            },
            detail: {
              show: false
            },
            data: [{ value: 40, name: '合计按时完成数' }]
          },
          {
            type: 'pie',
            hoverAnimation: false,
            radius: ['32%', '34%'],
            center: ['86%', '88%'],
            startAngle: 98.5,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 100,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: 'rgba(2,109,194,0.6)'
                      }, {
                        offset: 1, color: 'rgba(2,109,194,0)'
                      }],
                      globalCoord: false
                    }
                  }
                }
              }, {
                value: 260,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          }, {
            type: 'gauge',
            min: 0,
            max: 3,
            center: ['14%', '88%'],
            radius: '30%',
            startAngle: 185,
            endAngle: 80,
            splitNumber: 4,
            axisLine: {
              show: false,
              lineStyle: {
                color: [[0.1, '#ff8628'], [0.2, '#ff9a1c'], [0.3, '#ffd000'], [0.5, 'e8ee10'], [0.6, '#93d366'], [0.7, '#33a3bf'], [0.8, '#039ec8'], [0.9, '#15b9a9'], [1, '#1dbb97']],
                width: 0 * window.echartsFont
              }
            },
            axisLabel: {
              distance: 8,
              show: false,
              formatter: function (value) {
                return value.toFixed(0)
              },
              textStyle: {
                fontWeight: 'bolder',
                color: '#a5aab6',
                fontSize: 19 * window.echartsFont,
                shadowColor: '#fff',
                shadowBlur: 10
              }
            },
            axisTick: {
              length: 10 * window.echartsFont,
              splitNumber: 10,
              lineStyle: {
                color: 'auto',
                opacity: 0.25
              }
            },
            splitLine: {
              length: 25 * window.echartsFont,
              lineStyle: {
                width: 4 * window.echartsFont,
                color: [[0.1, '#ff8628'], [0.2, '#ff9a1c'], [0.3, '#ffd000'], [0.5, 'e8ee10'], [0.6, '#93d366'], [0.7, '#33a3bf'], [0.8, '#039ec8'], [0.9, '#15b9a9'], [1, '#1dbb97']],
                opacity: 0.25
              }
            },
            pointer: {
              shadowColor: '#fff',
              width: 5 * window.echartsFont,
              shadowBlur: 5
            },
            itemStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0, color: '#cf5d00' // 0% 处的颜色
                }, {
                  offset: 1, color: '#fa8c00' // 100% 处的颜色
                }], false),
                opacity: 0.25
              }
            },
            title: {
              show: false
            },
            detail: {
              show: false
            },
            data: [{ value: 40, name: '合计按时完成数' }]
          },
          {
            type: 'pie',
            hoverAnimation: false,
            radius: ['32%', '34%'],
            center: ['14%', '88%'],
            startAngle: 185,
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              {
                value: 103,
                itemStyle: {
                  normal: {
                    color: {
                      type: 'linear',
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [{
                        offset: 0, color: 'rgba(2,109,194,0.6)'
                      }, {
                        offset: 1, color: 'rgba(2,109,194,0)'
                      }],
                      globalCoord: false
                    }
                  }
                }
              }, {
                value: 257,
                itemStyle: {
                  normal: {
                    color: 'transparent'
                  }
                }
              }
            ]
          }
        ]
      }
    }
  },
  computed: {},
  watch: {},
  created () { },
  mounted () {
    this.setEcharts()
  },
  methods: {
    setEcharts () {
      const dom = this.$refs.guage
      Echarts.dispose(dom)
      this.myEcharts = Echarts.init(dom)
      this.myEcharts.setOption(this.option)
    }
  }
}
</script>

<style lang="scss" scoped>
#guage {
  margin: 3vh auto;
  width: 160vh;
  height: 80vh;
}
</style>
